<script setup lang="ts">
import { computed } from 'vue';
import { Close, Document, Loading, Warning, Moon } from '@element-plus/icons-vue';

/**
 * 标签页属性接口
 */
interface TabProps {
  id: string;
  title: string;
  url: string;
  icon?: string;
  loading: boolean;
  active: boolean;
  isolationGroup?: number;
  privateMode: boolean;
  canGoBack: boolean;
  canGoForward: boolean;
  isSecure: boolean;
  isHibernated?: boolean;
  hasError?: boolean;
  errorDescription?: string;
}

const props = defineProps<{
  tab: TabProps;
  index: number;
}>();

const emit = defineEmits<{
  (e: 'click', index: number): void;
  (e: 'close', index: number): void;
  (e: 'contextmenu', event: MouseEvent, index: number): void;
}>();

// 计算标签页标题显示
const displayTitle = computed(() => {
  if (props.tab.title && props.tab.title.trim()) {
    return props.tab.title.length > 20 
      ? props.tab.title.substring(0, 20) + '...' 
      : props.tab.title;
  }
  return '新标签页';
});

// 标签页图标
const tabIcon = computed(() => {
  if (props.tab.loading) {
    return 'icon-loading';
  }
  
  if (props.tab.icon) {
    return props.tab.icon;
  }
  
  if (props.tab.privateMode) {
    return 'icon-incognito';
  }

  return 'icon-webpage'; // 默认图标
});

/**
 * 点击标签页
 */
const handleClick = (event: MouseEvent) => {
  // 避免当点击关闭按钮时，触发标签页点击事件
  if (!(event.target as HTMLElement).closest('.tab-close-button')) {
    emit('click', props.index);
  }
};

/**
 * 点击关闭按钮
 */
const handleClose = (event: MouseEvent) => {
  event.stopPropagation();
  emit('close', props.index);
};

/**
 * 右键菜单
 */
const handleContextMenu = (event: MouseEvent) => {
  emit('contextmenu', event, props.index);
};

// 处理中键点击关闭标签页
const handleAuxClick = (event: MouseEvent) => {
  // 中键点击 (button = 1)
  if (event.button === 1) {
    event.preventDefault();
    event.stopPropagation();
    // 触发关闭事件
    emit('close', props.index);
  }
};

// 获取完整标题用于提示
const getFullTitle = () => {
  let title = props.tab.title || props.tab.url || '新标签页';
  
  if (props.tab.isHibernated) {
    title = `[休眠] ${title}`;
  }
  
  if (props.tab.hasError) {
    title = `[错误] ${title} - ${props.tab.errorDescription || '加载失败'}`;
  }
  
  if (props.tab.privateMode) {
    title = `[无痕] ${title}`;
  }
  
  if (props.tab.isolationGroup) {
    title = `[隔离组 ${props.tab.isolationGroup}] ${title}`;
  }
  
  if (props.tab.isSecure) {
    title = `🔒 ${title}`;
  } else if (props.tab.url && !props.tab.url.startsWith('about:') && !props.tab.url.startsWith('chrome://')) {
    title = `⚠️ ${title}`;
  }
  
  return title;
};
</script>

<template>
  <div 
    class="browser-tab" 
    :class="{ 
      'active': tab.active, 
      'is-loading': tab.loading,
      'is-secure': tab.isSecure,
      'is-hibernated': tab.isHibernated,
      'has-error': tab.hasError,
      'private-mode': tab.privateMode 
    }"
    @click="handleClick"
    @contextmenu="handleContextMenu"
    @auxclick="handleAuxClick"
  >
    <div class="tab-icon">
      <img v-if="tab.icon && !tab.loading && !tab.isHibernated" :src="tab.icon" alt="" />
      <el-icon v-else-if="tab.isHibernated" class="hibernated-icon"><Moon /></el-icon>
      <el-icon v-else-if="tab.hasError" class="error-icon"><Warning /></el-icon>
      <el-icon v-else-if="tab.loading" class="loading-icon"><Loading /></el-icon>
      <el-icon v-else><Document /></el-icon>
      
      <div v-if="tab.privateMode" class="private-indicator" title="无痕模式"></div>
    </div>
    
    <div class="tab-title" :title="getFullTitle()">
      {{ tab.title || tab.url || '新标签页' }}
    </div>
    
    <div class="tab-close" @click.stop="handleClose">
      <el-icon><Close /></el-icon>
    </div>
  </div>
</template>

<style scoped>
.browser-tab {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 160px;
  max-width: 240px;
  height: 32px;
  margin-top: 8px;
  padding: 0 8px;
  background-color: rgba(240, 240, 240, 0.8);
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.2s;
  
  &:hover {
    background-color: rgba(245, 245, 245, 0.9);
  }
  
  &.active {
    background-color: #ffffff;
    
    .tab-title {
      color: #202124;
    }
  }
  
  &.is-loading {
    .loading-icon {
      animation: spin 1s linear infinite;
    }
  }
  
  &.is-hibernated {
    opacity: 0.7;
    
    .hibernated-icon {
      color: #5086ec;
    }
  }
  
  &.has-error {
    .error-icon {
      color: #f44336;
    }
    
    .tab-title {
      color: #f44336;
    }
  }
  
  &.private-mode {
    background-color: rgba(40, 40, 50, 0.8);
    
    &:hover {
      background-color: rgba(50, 50, 60, 0.9);
    }
    
    &.active {
      background-color: #353535;
    }
    
    .tab-title {
      color: #e8eaed;
    }
  }
  
  :global(html.dark) & {
    background-color: rgba(60, 64, 67, 0.8);
    
    &:hover {
      background-color: rgba(70, 74, 77, 0.9);
    }
    
    &.active {
      background-color: #202124;
      
      .tab-title {
        color: #e8eaed;
      }
    }
    
    &.private-mode {
      background-color: rgba(30, 30, 35, 0.8);
      
      &:hover {
        background-color: rgba(40, 40, 45, 0.9);
      }
      
      &.active {
        background-color: #202124;
      }
    }
  }
}

.tab-icon {
  position: relative;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  
  img {
    width: 16px;
    height: 16px;
    object-fit: contain;
  }
  
  .private-indicator {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 6px;
    height: 6px;
    background-color: #8e24aa;
    border-radius: 50%;
  }
}

.tab-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  color: #5f6368;
  margin-right: 8px;
  
  :global(html.dark) & {
    color: #9aa0a6;
  }
}

.tab-close {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  
  &:hover {
    background-color: rgba(0, 0, 0, 0.1);
    
    :global(html.dark) & {
      background-color: rgba(255, 255, 255, 0.1);
    }
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style> 